<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-table__empty-block {
            height: 0;
        }
        .img-delete:before {
            position: absolute;
            top: -5px;
            color: red;
            margin-left: -15px;
            z-index: 999;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />
    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">vip服务管理</h1>
                <el-card class="box-card" style="margin-top: 10px">
                    <div slot="header" class="clearfix" v-if="isPermission('vip:add', user.permissions)">
                        <el-button type="primary" style="float: left;" @click.native="add">添加</el-button>
                    </div>
                    <el-table
                            :data="list"
                            border
                            style="width: 100%">
                        <el-table-column
                                type="index"
                                label="序号"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="名称">
                        </el-table-column>
                        <el-table-column
                                prop="expiry"
                                label="有效期"
                                :formatter="formatterExpiry">
                        </el-table-column>
                        <el-table-column
                                prop="salePrice"
                                label="价格"
                                :formatter="formatterPrice">
                        </el-table-column>
                        <el-table-column
                                prop="statusName"
                                label="状态">
                        </el-table-column>
                        <el-table-column
                                prop="soldCount"
                                label="销量"
                                :formatter="formatterSoldCount">
                        </el-table-column>
                        <el-table-column
                                prop="realName"
                                label="创建人">
                        </el-table-column>
                        <el-table-column
                                prop="insertTime"
                                label="创建时间"
                                align="center"
                                :formatter="formatterTime"
                                width="130">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                label="操作"
                                inline-template>
                            <div style="margin-left: -10px">
                                <el-dropdown>
                                    <el-button size="small" type="primary">
                                        操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                    </el-button>
                                    <el-dropdown-menu slot="dropdown" align="center">
                                        <el-dropdown-item v-if="isPermission('vip:view', user.permissions)"><el-button size="mini" type="primary" @click.native.prevent="detail(row)">详情</el-button></el-dropdown-item>
                                        <el-dropdown-item v-if="isPermission('vip:edit', user.permissions)"><el-button size="mini" type="primary" @click.native.prevent="edit(row)">编辑</el-button></el-dropdown-item>
                                        <el-dropdown-item v-if="row.status === 4 && isPermission('vip:online', user.permissions)"><el-button size="mini" type="primary" @click="confirmDownItem(row.id)">下架</el-button></el-dropdown-item>
                                        <el-dropdown-item v-if="row.status === 5 && isPermission('vip:online', user.permissions)"><el-button size="mini" type="primary" @click="confirmUpItem(row.id)">上架</el-button></el-dropdown-item>
                                        <el-dropdown-item v-if="isPermission('vip:delete', user.permissions)"><el-button size="mini" type="primary" @click="confirmDeleteItem(row.id)">删除</el-button></el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @current-change="handleCurrentPageChange"
                            :current-page="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="totalCount">
                    </el-pagination>
                </el-card>
            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>

    <el-dialog title="添加vip服务" v-model="addVipDialog">
        <el-card class="box-card">
            <el-form :model="addVipForm" ref="addVipForm" :rules="vipRules" label-width="80px">
                <el-form-item label="名称" prop="name" label-width="80px">
                    <el-input v-model="addVipForm.name" style="width:200px;" :disabled="formDisabled"></el-input>
                </el-form-item>
                <el-form-item label="有效期" label-width="80px" required :inline="true">
                    <el-col :span="3">
                        <el-form-item prop="expiry">
                            <el-input-number :controls="false" v-model="addVipForm.expiry" style="width:90px;" :disabled="formDisabled"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1"></el-col>
                    <el-col :span="2">
                        <el-form-item prop="unit">
                            <el-select v-model="addVipForm.unit" style="width:90px;" :disabled="formDisabled">
                                <el-option label='天'value="d"></el-option>
                                <el-option label='周'value="w"></el-option>
                                <el-option label='月'value="m"></el-option>
                                <el-option label='年'value="y"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="支付类型" prop="paymentType">
                    <el-radio-group v-model="addVipForm.paymentType" :disabled="formDisabled">
                        <el-radio :label="1" style="line-height: 36px">现金</el-radio>
                        <el-radio :label="2" style="line-height: 36px">积分</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="金额" prop="money" v-if="addVipForm.paymentType === 1">
                    <el-input-number :controls="false" v-model="addVipForm.price" style="width:90px;" :disabled="formDisabled"></el-input-number>&nbsp;元
                </el-form-item>
                <el-form-item label="积分" prop="point" v-if="addVipForm.paymentType === 2">
                    <el-input-number :controls="false" v-model="addVipForm.price" style="width:90px;" :disabled="formDisabled"></el-input-number>
                </el-form-item>
                <!--<el-form-item label="缩略图" prop="picUrl">-->
                    <!--<img v-if="addVipForm.picUrl !== ''" :src="qiniuUrl + addVipForm.picUrl" style="height:100px">-->
                    <!--<i v-if="!formDisabled && addVipForm.picUrl !== ''" class="el-icon-circle-close img-delete" @click="deletePic">-->
                    <!--</i>-->
                    <!--<el-upload-->
                            <!--style="display: inline-block"-->
                            <!--action="/file/upload"-->
                            <!--:before-upload="beforeUpload"-->
                            <!--:on-success="uploadPicSuccess"-->
                            <!--:show-file-list="false">-->
                        <!--<el-button v-if="!formDisabled" type="primary" @click="picLoading = true">上传图片</el-button>-->
                        <!--<div v-if="!formDisabled" slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                    <!--</el-upload>-->
                <!--</el-form-item>-->
            </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="cancel">取 消</el-button>
            <el-button v-if="!formDisabled" type="primary" @click="saveAddVip">保 存</el-button>
        </div>
    </el-dialog>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function(){
            return {
                user: ${(user)!'null'},
                form: {
                    resource: 1,
                    desc: ''
                },
                list: [],
                addVipDialog:false,
                picLoading: false,
                formDisabled: false,
                addVipForm:{
                    id: '',
                    kind: '',
                    name:'',
                    unit:"",
                    expiry:'',
                    paymentType:'',
                    price:'',
                    picUrl:''
                },
                vipRules:{
                    name:[
                        {required: true, message: "请输入名称",trigger:'blur'}
                    ],
                    unit:[
                        {required: true, message: "请选择单位",trigger:'blur'}
                    ],
                    expiry:[
                        {required: true, message: "请输入有效期"}
                    ],
                    price:[
                        {required: true, message: "请输入积分"}
                    ],
                    picUrl:[
                        {required: true, message: "请上传图片"}
                    ]
                },
                currentPage: list.currentPage,
                pageSize: list.pageSize,
                totalCount: 0,
                headerNavList: list.headerNavList,
                accountNavList: list.accountNavList,
                leftMenuList: list.menu,
                qiniuUrl: list.qiniuUrl
            }
        },
        mounted: function () {
            this.getList()
        },
        methods: {
            confirmDeleteItem (id) {
                let that = this;
                this.$confirm('此操作将删除该VIP服务, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    that.deleteItem(id);
                }).catch(function () {
                    that.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            formatterTime (row, column) {
                if (row.insertTime !== undefined && (row.insertTime + "").length >= 10) {
                    return (row.insertTime + "").substring(0, 10);
                } else {
                    return row.insertTime;
                }
            },
            deleteItem(id){
                let that = this
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http('/item/delete',{id:id},function (res) {
                    if(res.status === 200){
                        loading.close();
                        that.getList();
                        that.$alert('删除成功','提示',{
                            confirmButtonText:'确定',
                        })
                    }else{
                        loading.close();
                        that.$alert(res.errMsg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                },function (res) {
                    loading.close();
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            confirmUpItem (id) {
                let that = this;
                this.$confirm('此操作会将该VIP服务上架, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    that.upItem(id);
                }).catch(function () {
                    that.$message({
                        type: 'info',
                        message: '已取消上架'
                    });
                });
            },
            confirmDownItem (id) {
                let that = this;
                this.$confirm('此操作会将该VIP服务下架, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    that.downItem(id);
                }).catch(function () {
                    that.$message({
                        type: 'info',
                        message: '已取消下架'
                    });
                });
            },
            upItem (id) {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/item/online", {id: id}, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        that.getList();
                        that.$alert('上架成功','提示',{
                            confirmButtonText:'确定',
                        })
                    } else {
                        loading.close();
                        that.$alert(res.errMsg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('上架失败','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            downItem (id) {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/item/offline", {id: id}, function (res) {
                    if (res.status === 200) {
                        loading.close();
                        that.getList();
                        that.$alert('下架成功','提示',{
                            confirmButtonText:'确定',
                        })
                    } else {
                        loading.close();
                        that.$alert(res.errMsg, '提示', {
                            confirmButtonText: '确定',
                        });
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('下架失败','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            formatterSoldCount(row){
                if (row.soldCount === undefined || row.soldCount === '') {
                    return '0'
                } else {
                    return row.soldCount
                }
            },
            formatterPrice(row){
                if (row.payType === 1) {
                    return row.salePrice + '元'
                } else {
                    return row.pointPrice + '积分'
                }
            },
            formatterExpiry(row){
                if (row.expiry === undefined || row.expiry === '') {
                    return '永久有效'
                } else {
                    let arr = row.expiry.split(':')
                    let count = arr[0]
                    let unit = arr[1]
                    if (unit === 'd') {
                        return count + '天'
                    } else if (unit === 'w') {
                        return count + '周'
                    } else if (unit === 'm') {
                        return count + '月'
                    } else if (unit === 'y') {
                        return count + '年'
                    }
                }
            },
            getList () {
                let that = this
                let obj = {}
                obj.currentPage = this.currentPage
                obj.pageSize = this.pageSize
                let loading = this.$loading({fullscreen: true, lock: true, text: '加载中'});
                this.http('/item/vip/list',obj,function (res) {
                    if(res.status === 200){
                        that.list = res.data.list;
                        that.totalCount = res.data.total;
                        loading.close();
                    }else{
                        loading.close();
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                },function (res) {
                    loading.close();
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            saveAddVip () {
                let v = false
                this.$refs.addVipForm.validate(function (b) {
                    v = b
                })
                if (v) {
                    let that = this
                    let obj = {
                        name: this.addVipForm.name,
                        kind: 1,
                        expiry: this.addVipForm.expiry + ':' + this.addVipForm.unit,
                        payType: this.addVipForm.paymentType,
                        thumbnail: this.addVipForm.picUrl
                    }
                    if (this.addVipForm.paymentType === 1) {
                        obj.salePrice = this.addVipForm.price
                    } else {
                        obj.pointPrice = this.addVipForm.price
                    }
                    let url = ''
                    if (this.addVipForm.id !== '') {
                        obj.id = this.addVipForm.id
                        url = '/item/update'
                    } else {
                        url = '/item/vip/insert'
                    }
                    this.http(url,obj,function (res) {
                        if(res.status === 200){
                            that.addVipDialog = false
                            that.getList()
                        }else{
                            that.$alert(res.errMsg,'提示',{
                                confirmButtonText:'确定',
                            })
                        }
                    },function (res) {
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    })
                }
            },
            handleCurrentPageChange(val) {
                this.currentPage = val
            },
            add () {
                this.addVipForm.id = ''
                this.addVipForm.name = ''
                this.addVipForm.expiry = ''
                this.addVipForm.unit = ''
                this.addVipForm.paymentType = ''
                this.addVipForm.price = ''
                this.addVipForm.picUrl = ''
                this.addVipDialog = true
                this.formDisabled = false
            },
            detail (row) {
                this.addVipForm.name = row.name
                this.addVipForm.expiry = ''
                this.addVipForm.unit = ''
                if (row.expiry !== '' && row.expiry !== undefined) {
                    let arr = row.expiry.split(':')
                    this.addVipForm.expiry = arr[0]
                    this.addVipForm.unit = arr[1]
                }
                this.addVipForm.paymentType = row.payType
                this.addVipForm.price = ''
                if (row.payType === 1) {
                    this.addVipForm.price = row.salePrice
                } else {
                    this.addVipForm.price = row.pointPrice
                }
                this.addVipForm.picUrl = row.thumbnail
                this.addVipDialog = true
                this.formDisabled = true
            },
            edit (row) {
                this.addVipForm.id = row.id
                this.addVipForm.name = row.name
                this.addVipForm.expiry = ''
                this.addVipForm.unit = ''
                if (row.expiry !== '' && row.expiry !== undefined) {
                    let arr = row.expiry.split(':')
                    this.addVipForm.expiry = arr[0]
                    this.addVipForm.unit = arr[1]
                }
                this.addVipForm.paymentType = row.payType
                this.addVipForm.price = ''
                if (row.payType === 1) {
                    this.addVipForm.price = row.salePrice
                } else {
                    this.addVipForm.price = row.pointPrice
                }
                this.addVipForm.picUrl = row.thumbnail
                this.addVipDialog = true
                this.formDisabled = false
            },
            beforeUpload (file) {
                if (file.type === "image/png") {
                    this.imgType = ".png";
                    return true;
                } else if (file.type === "image/jpeg") {
                    this.imgType = ".jpg";
                    return true;
                } else {
                    this.$message.error('上传头像图片只能是 JPG 或 png 格式!');
                    return false;
                }
            },
            uploadPicSuccess(response,file){
                if (response.status === 100) {
                    this.picLoading = false;
                    this.addVipForm.picUrl = response.returnValue[0].id + this.imgType;
                } else {
                    this.$alert('上传失败', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
            deletePic () {
                this.addVipForm.picUrl = "";
            },
            cancel(){
               this.addVipDialog = false
                this.$refs.addVipForm.resetFields()
            }
        }
    })
</script>

<!-- 20170105 --></body>
</html>